<template>
    <div class="ceilMode">
        <div class="ceilBox">
            <div class="wrap twoCeil clearfix">
                <div class="logoBox">
                    <router-link to="/"><img src="../img/jsLogo.png" alt=""></router-link>
                </div>
                <ul class="listBox">
                    <li :class="flag==1?'color':''" @click="refresh">
                        <router-link :to="{path:'/model',query:{type:1,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">3D模型<span v-if="flag==1"></span></router-link>
                    </li>
                    <li :class="flag==3?'color':''">
                        <router-link :to="{path:'/works',query:{type:7,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">高清案例<span v-if="flag==3"></span></router-link></li>
                    <li :class="flag==2?'color':''" @click="refresh">
                        <router-link :to="{path:'/sumodel',query:{type:2,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">SU模型<span v-if="flag==2"></span></router-link></li>
                    
                    <li :class="flag==4?'color':''">
                        <router-link :to="{path:'/concept',query:{type:4,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">概念方案<span v-if="flag==4"></span></router-link>
                        </li>
                    <li :class="flag==5?'color':''">
                        <router-link :to="{path:'/cad',query:{type:3,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">施工图<span v-if="flag==5"></span></router-link></li>
                    <!-- <li :class="flag==6?'color':''">
                        <router-link to="budget">预算方案<span v-if="flag==6"></span></router-link></li> -->
                    <li :class="flag==7?'color':''">
                        <router-link :to="{path:'/material',query:{type:6,catid1:0,catid2:0,style:0,id:0,keys:0,sort:0,vip:0,page:0}}">材质贴图<span v-if="flag==7"></span></router-link>
                    </li>
                </ul>
                <div class="ceilBtnInfo">
                    <login-register></login-register>
                </div>
                <div class="ceilBtn">
                    <div class="ceilBtnSpan" style="margin-right: 21px;">
                        <router-link to="/uploadIndex" title="模型上传"><i class="uploadImg"></i> </router-link>
                    </div>
                    <div class="ceilBtnSpan">
                        <router-link to="/recharge" target="_blank" title="会员充值"> <i class="moneyCenter"></i></router-link>
                    </div>
                    <!-- <button>登录</button>
                    <button>注册</button> -->
                    
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
import loginRegister from './loginRegister'

import jwtToken from '../helpers/jwt'
import { ErrorBag } from 'vee-validate';
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
export default {
    name:"twoCeil",
    props:["flag"],
    data(){
        return {
            // color: 
        }
    },
    methods:{
        ...mapMutations(//mutations中的方法
            ["sortAllFalse","sortAllTrue","bigSortNameHide","miniSortNameHide"]
        ),
        refresh(){
            // this.$emit('twoceilClick',0);
            this.sortAllTrue();
            this.miniSortNameHide();
            this.bigSortNameHide();
        }
    },
    components:{
        loginRegister,//登录注册
    }
}
</script>
<style scope> 
    
   .ceilMode .ceilBox{
        height: 71px;
        background-color: #fff;
    }
    .logoBox{
        float: left;
        padding-top: 17px;
        margin-right: 37px;
    }
    .listBox{
        float: left;
    }
    .listBox li{
        float: left;
        font-size: 16px;
        line-height: 71px;
        color: #686868;
        padding: 0 8px;
        margin-right: 47px;
        position: relative;
    }
    .listBox li span{
        /* display: none; */
    }
    .listBox li span{
        position: absolute;
        width: 100%;
        height: 3px;
        bottom: 0;
        left: 0;
        background-color: #ea514b;
    }
    .ceilBtn{
        float: right;
        font-size: 12px;
        padding-top: 20px;
        margin-right: 14px;
    }
    /* .ceilBtn button{
        background: transparent;
        border: none;
        outline: none;
        padding: 0;
        line-height: 24px;
    } */
    .ceilBtnInfo{
        display: inline-block;
        vertical-align: top;
        float:right;
        /* padding-top:7px; */
    }
    /* .ceilBtn button:nth-of-type(1){
        width: 60px;
        border-radius: 12px;
        background: #ea514b;
        color: #fff;
        margin-right: 20px;
    } */
    .ceilBtn .ceilBtnSpan{
        display: inline-block;
        margin-right: 20px;
        vertical-align: top;
        /* margin-top: 3px; */
    }
    .ceilBtnSpan span{
        font-size: 14px;
        margin-top: 3px;
    }
    .ceilBtn .ceilBtnSpan a{
        color: #808787;

    }
    .ceilBtn .ceilBtnSpan a:hover{
        text-decoration: none;
        color:#ec5a55;
    }
    .ceilBtn i{
        font-size: 16px;
        vertical-align: middle;
        margin-right: 10px;
    }
    .color{
        color: #ec5a55!important;
    }
    .listBox li a,.listBox li a:hover{
        text-decoration: none;
        color: #333;
    }
</style>
